<template>
  <div class="box">
    <div class="titleBox">
      <div class="top">
        <img src="@/assets/img/recommendMusic.png" alt="" />
        <div class="info">
          <h3>每日歌曲推荐</h3>
          <p>根据你的音乐口味生成，每天6:00更新</p>
        </div>
      </div>
      <div class="button">
        <div class="play" @click="playAll">
          <i class="el-icon-video-play" style="font-size: 20px"></i> 播放全部
        </div>
        <div class="collect" @click="$message.warning('敬请期待!')">
          <i class="el-icon-star-off"></i>
          收藏
        </div>
      </div>
    </div>
    <div class="table" v-if="recommendMusic.length != 0">
      <el-table
        :data="recommendMusic"
        stripe
        lazy
        style="width: 100%"
        @row-dblclick="doubleClick"
        @cell-click="handelCellClick"
      >
        <el-table-column
          min-width="80"
          label="序号"
          type="index"
          :index="handleIndex"
        >
        </el-table-column>
        <el-table-column min-width="30" label="下载">
          <i class="el-icon-download"></i
        ></el-table-column>
        <el-table-column
          prop="name"
          label="标题"
          min-width="350"
        ></el-table-column>
        <el-table-column
          prop="ar[0].name"
          label="歌手"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="al.name"
          label="专辑"
          min-width="170"
        ></el-table-column>
        <el-table-column
          prop="dt"
          label="时长"
          min-width="100"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { handleMusicTime } from '@/plugins/utils'
import { getMusicUrl } from '@/api/nobreak/nobreak'
export default {
  data() {
    return {
      // 是否禁止滚动加载
      scrollLoadDisabled: false,
      // 每日推荐歌曲列表
      recommendMusic: [],
      //   每日推荐id （自己起的，用于上传vuex当musicListId，只是作为一个唯一标识）
      recommendMusicListId: 'recommendMusic'
    }
  },
  methods: {
    // 获取每日推荐歌曲
    async getRecommendMusic() {
      let res = await this.$request('/recommend/songs')
      this.recommendMusic = res.data.data.dailySongs
      // console.log(this.recommendMusic)
      // 处理时间
      this.recommendMusic.forEach((item, index) => {
        this.recommendMusic[index].dt = handleMusicTime(item.dt)
      })
    },
    // 处理table索引
    handleIndex(index) {
      // console.log(index);
      index += 1
      if (index < 10) {
        return '0' + index
      } else {
        return index
      }
    },
    async playAll() {
      // console.log('播放全部')
      this.$store.commit('updateMusicId', this.recommendMusic[0].id)
      this.$store.commit('updateMusicList', {
        musicList: this.recommendMusic, // 单曲列表
        musicListId: this.recommendMusic.id
      })
    },
    // 双击播放
    doubleClick(row) {
      // console.log(row, '双击播放')
      this.$store.commit('updateMusicId', row.id)
      if (this.recommendMusic.id !== this.$store.state.musicListId) {
        this.$store.commit('updateMusicList', {
          musicList: this.recommendMusic, // 单曲列表
          musicListId: this.recommendMusic.id
        })
      }
    },
    // 点击下载
    async handelCellClick(cell, row, column) {
      if (column?.children[0]?.children[0]?.className === 'el-icon-download') {
        // console.log('找到了')
        // this.$message.warning('敬请期待!')
        // console.log(row, cell)
        let res = await getMusicUrl(cell.id)
        console.log(res)
        const musicUrl = res.data.data[0].url
        // console.log(res.data.data[0].url)
        // 匹配资源的域名
        let url = res.data.data[0].url.match(/http.*?\.net/)
        // console.log(url)
        // 匹配域名名称，并匹配对应的代理
        let serve = url[0].match(/http:\/(\S*).music/)[1]
        // console.log(serve)
        // 截取后面的参数
        let params = res.data.data[0].url.slice(url[0].length)
        if (
          serve != '/m7' &&
          serve != '/m701' &&
          serve != '/m8' &&
          serve != '/m801'
        ) {
          // 没有对应的代理
          this.$message.error('匹配不到对应的代理,下载失败!')
          return
        }
        // console.log(params)
        if (musicUrl === null) {
          this.$message.warning('暂时无法获取资源')
        }
        let downloadMusicInfo = {
          url: serve + params,
          name:
            cell.name +
            ' - ' +
            cell.ar[0].name +
            '.' +
            res.data.data[0].type.toLowerCase()
        }

        this.$store.commit('updateDownloadMusicInfo', downloadMusicInfo)
      }
    }
  },
  created() {
    this.getRecommendMusic()
  }
}
</script>
<style lang="scss" scoped>
.titleBox {
  padding: 0 10px;
  .top {
    display: flex;
    img {
      width: 120px;
      margin-right: 10px;
    }
    .info {
      margin-top: 20px;
      h3 {
        font-size: 25px;
      }
      p {
        color: #666;
      }
    }
  }
  .button {
    margin-left: 15px;
  }
}
.button {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
  .play {
    background-color: #ec4141;
    color: #fff;
    font-size: 14px;
    padding: 5px 15px;
    border-radius: 15px;
    margin-right: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    &:hover {
      background-color: #e53f3f;
    }
    .el-icon-video-play {
      margin-right: 5px;
    }
  }
  .collect {
    border: 1px solid #ccc;
    padding: 5px 15px;
    border-radius: 15px;
    color: #666;
    font-size: 14px;
    margin-right: 8px;
    cursor: pointer;
    &:hover {
      background-color: #f7f7f7;
    }
  }
}
</style>
